<template>
  <v-page class="page-max">
    <view class="top p-lg bg-light">
      <view class="d-flex">
        <user-head class="w-66 h-66 m-r-lg"></user-head>
        <view class="info flex-fill p-l-md">
          <view class="name">晴儿</view>
          <view class="nickname fn-sm color-tips">昵称：1231</view>
          <view class="id fn-sm color-tips">id：1231</view>
        </view>
      </view>
    </view>
    <!-- 非好友 -->
    <template v-if="false">
      <view class="p-x-md bg-light m-t-md">
        <view class="p-y-md border-b d-flex justify-between">
          <view> 黑名单 </view>
          <view>
            <u-switch v-model="checked" size="45"></u-switch>
          </view>
        </view>
        <view class="p-y-md border-b d-flex justify-between" @click="report">
          <view> 举报 </view>
          <view class="iconfont color-gray-1 fn-20"> &#xe601; </view>
        </view>
      </view>
      <view class="m-md p-md fn-center">
        <v-button type="theme" class="btn">添加好友</v-button>
      </view>
    </template>
    <!-- 好友 -->
    <template>
      <view class="p-x-md bg-light m-t-md">
        <view class="p-y-md border-b d-flex justify-between">
          <view> 分享他的名片 </view>
          <view class="iconfont color-gray-1 fn-20"> &#xe601; </view>
        </view>
        <view class="p-y-md border-b d-flex justify-between">
          <view> 消息通知 </view>
          <view>
            <u-switch v-model="checked" size="45"></u-switch>
          </view>
        </view>
      </view>
      <view class="p-x-md bg-light m-t-md">
        <view class="p-y-md border-b d-flex justify-between">
          <view> 查找聊天记录 </view>
          <view class="iconfont color-gray-1 fn-20"> &#xe601; </view>
        </view>
        <view class="p-y-md border-b d-flex justify-between">
          <view> 聊天文件 </view>
          <view>
            <view class="iconfont color-gray-1 fn-20"> &#xe601; </view>
          </view>
        </view>
        <view class="p-y-md border-b d-flex justify-between">
          <view> 来源 </view>
          <view class="color-tips fn-sm"> 通过扫码添加 </view>
        </view>
      </view>
      <view class="m-md p-md fn-center">
        <v-button type="theme" class="btn">发送消息</v-button>
      </view>
    </template>
    <u-action-sheet :list="list" v-model="reportShow"></u-action-sheet>
  </v-page>
</template>
<script>
import uSwitch from "node_modules/uview-ui/components/u-switch/u-switch.vue";
import uActionSheet from "node_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue";
export default {
  data() {
    return {
      checked: false,
      reportShow: false,
      list: [
        { text: "低俗色情" },
        { text: "骚扰信息" },
        { text: "垃圾广告" },
        { text: "政治敏感" },
        { text: "谣言" },
        { text: "违法" },
        { text: "其他理由" },
      ],
    };
  },
  components: {
    uSwitch,
    uActionSheet,
  },
  onNavigationBarButtonTap() {
    this._router.push("/pages/other/more-setting");
  },
  methods: {
    //   举报
    report() {
      uni.showModal({
        title: "投诉须知",
        content:
          "你应保证你的投诉行为基于善意，并代表你本人真实意思。微聊作为中立的平台服务者，收到你的投诉后，会尽快按照相关法律法规的规定独立判断并进行处理。进行投诉的账号需对其投诉行为负责，且完成绑卡实名认证，恶意投诉需承担相应的后果。微聊会采用合理的措施保护你的个人信息；除法律法规规定的情形外，未经用户许可不会向第三方公开、透露你的个人信息。",
        success: ($ev) => {
          if ($ev.confirm) this.reportShow = true;
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.btn {
  width: 300rpx;
}
</style>